<!DOCTYPE html>
<html lang="en">
<head>
    <title>Leaflet</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="lib/leaflet.css" type="text/css">
    <link rel="stylesheet" href="style/map.css" type="text/css">
    <script src="lib/leaflet.js"></script>
    <style>
        .leaflet-control-scale-line {
            font-size: 12px;
            text-align: center;
            font-weight: bold;
            border: 3px solid red;
            color: red;
            border-top: none;
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: rgba(0,0,0,0);
        }

        .my-mouse-position {
            font-size: 12px;
            font-weight: bold;
            color: red;
            position: absolute;
            bottom: 20px;
            right: 20px;
            z-index: 999;
        }
    </style>
</head>
<body>
<div id="map" class="map">
    <div class="my-mouse-position" id="mousePosition"></div>
</div>
<script>
    const timeStart = Date.now()
    var map = L.map('map', {
        zoomControl: true,
        zoomDelta: 2
    }).setView([107.1104, 34.2627].reverse(), 4);

    // // 或者通过代码添加
    // L.control.zoom({}).addTo(map);

    L.control.scale({
        maxWidth: 120,
        metric: true,
        imperial: false
    }).addTo(map);

    map.on('mousemove', e => {
        const {lng, lat} = e.latlng
        document.getElementById('mousePosition').innerText = [lng, lat].map(i => i.toFixed(4)).join(',')
    })

    map.on('layeradd', () => {
        const timeEnd = Date.now()
        console.log((timeEnd - timeStart) / 1000)
    })

    L.tileLayer('http://localhost:8081/amap512/{z}/{x}/{y}.png', {
        tileSize: 256
    }).addTo(map);

    L.tileLayer('http://localhost:8081/geoserver/gwc/service/tms/1.0.0/mapbox%3Aprovince@EPSG%3A900913@png/{z}/{x}/{-y}.png', {
        tileSize: 256
    }).addTo(map);
</script>
</body>
</html>